<template>
  <div class="app-container">
    <van-cell-group inset>
      <van-cell title="昵称" value="内容" />
    </van-cell-group>
  </div>
</template>
<script setup>

import { computed, reactive, toRefs, ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import Img01 from "@/assets/image/img01.png"
import Img02 from "@/assets/image/img02.png"
import { showToast } from 'vant';
import {
  OrderGetCode, // 新增订单
  CreateOrder, // 新增订单
  OrderStates, // 订单状态查询
  GetPayWay, // 支付
} from "@/api/index.js"

import GoodItem from "@/components/goodsItem/index.vue"
import AnchorItem from "@/components/anchorItem/index.vue"

const route = useRoute()
const router = useRouter()

const state = reactive({
  goodsList: []
})

const { goodsList } = toRefs(state)

let anchorList = ref([{
  "id": 1,
  "createBy": "101",
  "createTime": "2024-06-17 13:08:06",
  "updateBy": null,
  "updateTime": null,
  "remark": null,
  "h5Id": 9,
  "anchorId": "1815252442099720194",
  "anchorName": "广告定制",
  "qq": null,
  "qrCode": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
  "title": "灵儿",
  "diyPrice": "99.00",
  "diyHighPrice": "0.00"
},
{
  "id": 5,
  "createBy": "101",
  "createTime": "2023-10-28 22:30:15",
  "updateBy": "101",
  "updateTime": "2024-06-09 10:55:13",
  "remark": null,
  "h5Id": 4,
  "anchorId": "1815252442099720194",
  "anchorName": "广告定制",
  "qq": "233333",
  "qrCode": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
  "title": "琪琪",
  "diyPrice": "99.00",
  "diyHighPrice": "99.00"
},
{
  "id": 6,
  "createBy": null,
  "createTime": null,
  "updateBy": "1",
  "updateTime": "2023-10-28 21:23:25",
  "remark": null,
  "h5Id": 2,
  "anchorId": "1815252442099720194",
  "anchorName": "广告定制",
  "qq": "22233444",
  "qrCode": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
  "title": null,
  "diyPrice": null,
  "diyHighPrice": null
}])


let anchorPhotoList = ref([
  {
    "id": 1,
    "createBy": "101",
    "createTime": "2024-06-17",
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "h5Id": 9,
    "anchorId": "1815252442099720194",
    "anchorName": "广告定制",
    "qq": null,
    "qrCode": ["http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/183b20029c094cca98deb00d2c6965a4.jpg", "http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/c9edbaa2e0064c8ea9577f1db2f30826.jpg", "http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/08/cd5d90c2352947759328eccfec7818e6.jpg", "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"],
    "title": "灵儿",
    "diyPrice": "99.00",
    "diyHighPrice": "0.00"
  },
  {
    "id": 2,
    "createBy": "101",
    "createTime": "2024-06-17",
    "updateBy": "101",
    "updateTime": "2024-06-17 14:17:13",
    "remark": null,
    "h5Id": 8,
    "anchorId": "1815252442099720194",
    "anchorName": "广告定制",
    "qq": null,
    "qrCode": ["http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/183b20029c094cca98deb00d2c6965a4.jpg", "http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/13/c9edbaa2e0064c8ea9577f1db2f30826.jpg", "http://dytestoss.oss-cn-beijing.aliyuncs.com/2024/07/08/cd5d90c2352947759328eccfec7818e6.jpg"],
    "title": "王婷",
    "diyPrice": "99.00",
    "diyHighPrice": "0.00"
  },
])

let goodsListLeft = computed(() => state.goodsList.filter((o, i) => i % 2 == 0))
let goodsListRight = computed(() => state.goodsList.filter((o, i) => i % 2 == 1))

let active = ref(0)
const tabsChange = () => {
  state.goodsList = active.value == 0 ? anchorList.value : anchorPhotoList.value
}

const mineSetting = () => {
  router.push({
    name: 'mineSetting'
  })
}

onMounted(() => {
  tabsChange()
})

</script>



<style lang="scss" scoped>
.mine-head {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #fff;

  .mine-head-right {
    margin-left: 10px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    h4 {
      font-weight: normal;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    p {
      font-size: 12px;
    }
  }
}

.mine-main {
  margin-top: 5px;
}

.app-container {
  background: #fff;
  overflow: auto;
  padding-bottom: 60px;
}
</style>
